<script setup lang="ts">
import { getSubjectInfo } from '@/api/subject';
import type { Subject } from '@/api/subject/type';
import { onBeforeMount, ref } from 'vue';
import { useRoute } from 'vue-router';
import Top from './components/Top.vue';
import Body from './components/Body.vue';
import Header from './components/Header.vue';
const id = ref('');
const subject = ref({
    creator: {
        nickname: ''
    }
} as Subject);

onBeforeMount(() => {
    const route = useRoute();
    if (!Array.isArray(route.query.id)) {
        id.value = route.query.id as string;
        init();
    }
})

const init = () => {
    getSubjectInfo(id.value).then((res) => {
        subject.value = res.data;
    })
}

</script>

<template>
    <div class="container">
        <Header></Header>
        <div class="content">
            <Top v-model="subject"></Top>
            <Body v-model="subject"></Body>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 100%;
}
.content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
</style>